<!DOCTYPE html>
<html lang="zh_CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Minio Upload 上传示例</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/sweetalert2.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/spark-md5/3.0.2/spark-md5.min.js"></script>
  </head>

  <body>
    <div class="container">
      <h1 class="my-4 text-center">文件上传示例</h1>

      <div class="card mb-4">
        <div class="card-header bg-primary text-white">上传文件</div>
        <div class="card-body">
          <div class="drop-zone" id="drop-zone">
            <div class="drop-zone-prompt">
              <i class="bi bi-cloud-upload fs-1 text-primary mb-3"></i>
              <p>拖拽文件到此处或点击上传</p>
              <p class="small">支持任意类型文件，小于5MB使用普通上传，大于5MB使用分片上传</p>
              <p class="small text-success">已启用秒传功能，重复上传相同文件可瞬间完成</p>
            </div>
          </div>

          <div class="progress">
            <div id="upload-progress-bar" class="progress-bar bg-success" role="progressbar" style="width: 0%"></div>
          </div>
          <div id="upload-status"></div>

          <input type="file" style="display: none" id="file" />
          <div class="text-center mt-3">
            <button type="button" id="uploadBtn" class="btn btn-primary">
              <i class="bi bi-upload me-1"></i> 选择文件
            </button>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
          <span>已上传文件列表</span>
          <button class="btn btn-sm btn-light" id="refreshList"><i class="bi bi-arrow-clockwise"></i> 刷新列表</button>
        </div>
        <div class="card-body">
          <p class="small text-muted mb-3">以下是已成功上传的文件列表，点击文件名可以查看或下载文件</p>
          <ul class="list-group" id="file-list">
            <!-- 文件将通过JS动态添加 -->
          </ul>
          <div class="text-center mt-3" id="no-files-message" style="display: none">
            <p class="text-muted">暂无上传文件</p>
          </div>
        </div>
      </div>
    </div>

    <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script src="js/sweetalert2.all.min.js"></script>
    <script src="js/swal.js"></script>
    <script src="js/upload.js"></script>
  </body>
</html>
